@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        <div class="card-body" id="element-1">
        @verbatim
            <div class="border-bottom border-info form-group">
                <my-component inline-template>
                    <div>
                        <p>These are compiled as the component's own template.</p>
                        <p>Not parent's transclusion content.</p>
                    </div>
                </my-component>
                <text-x-template :name="'loko'"></text-x-template>
            </div>
            <div class="border-bottom border-info form-group">

            </div>
                <script type="text/x-template" :name="name" id="text-x-template">
                    <div>
                        <p>this is a script x template<p>
                        <p>{{name}}</p>
                    </div>
                </script>
        @endverbatim
        </div>
    </div>
</div>
@verbatim
<script>
    Vue.component("my-component", {
       template: `<div>inline template</div>`
    });
    Vue.component('text-x-template', {
        props: ["name"],
        template: "#text-x-template"
    });
    new Vue({
        el: "#element-1",
        data: {
            name: "loko"
        }
    });
</script>

@endverbatim
@endsection


